<template>
	<div style="position: relative;  height: 100vmin;">
		<el-dialog title="新建规则" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<div class="new_rule">
				<div>名称：</div>
				<el-input style="width: 50%;" v-model="name_value">
				</el-input>
			</div>
			<div class="new_rule">
				<div>协议类型：</div>
				<el-select v-model="agreement_value" placeholder="请选择">
					<el-option v-for="item in agreement" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div class="new_rule">
				<div>内部端口号：</div>
				<el-input style="width: 50%;" v-model="internal_port">
				</el-input>
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addNewNat()">确 定</el-button>
			</span>
		</el-dialog>


		<div style="width: 98%; margin-left:1%;margin-top: 2%; background-color:#171717 ;">
			<div class="mn_top">
				<div style="display: inline-block; color: #fff;font-size: 30px;">管理云服务器</div>
				<span style="display: inline-block;margin-left: 20px;color: #00afe0;cursor: pointer;"
					@click="toHome()">我的产品
				</span>
				<span style="color: #fff;padding: 0 5px;">&gt</span>
				<span style="display: inline-block;color: #fff;">管理云服务器 </span>
			</div>

			<div class="action" style="background-color: #171717; margin-top: 20px;border-radius: 5px;">
				<el-button class="control" style="margin-left: 2%;" @click="power('start')" v-loading="isClick"
					:disabled="isClick">开机</el-button>
				<el-button class="control" @click="power('compel_restart')" v-loading="isClick"
					:disabled="isClick">重启</el-button>
				<el-button class="control" @click="power('compel_shut')" v-loading="isClick"
					:disabled="isClick">关机</el-button>
			</div>

			<div class="mn_main"
				style="position: absolute;width: 90%; margin-top: 20px; border-radius: 5px; background-color: #171717;height: 100vmin;">
				<div id="main_top">
					<div class="scro message" style="margin-left: 20px;" @click="toPage('controll')">信息与监控</div>
					<div class="scro disk" @click="toPage('elasticity')">弹性云盘
					</div>
					<div class=" scro disk" @click="toPage('backups')">备份还原
					</div>
					<div class=" scro port " @click=" toPage('nat')" style="border-bottom: 2px solid #00afe0;">NAT端口映射
					</div>
					<div class=" scro wall" @click="toPage('firewall')">防火墙规则</div>
					<div class="scro system" @click="toPage('system')">更换或重装系统</div>
					<div class="scro renew" @click="toPage('renew')">续费</div>
				</div>



				<div>
					<div class="mt" style="color: #fff; margin-left:2%;margin-top: 2%;border-bottom:1px solid #383838;">
						<div style="font-size: 20px;margin-bottom: 20px;">Nat端口映射</div>
						<el-button type="text" @click="dialogVisible = true"
							style="color: #fff;border: 1px solid #fff;padding: 10px 50px;border-radius: 5px;cursor: pointer; background-color: #171717;">+
							新建规则</el-button>
						<div style="margin: 1% 0;font-size: 13px;">
							NAT端口映射允许您将服务器内的<b>远程连接、游戏服务、内网穿透</b>等自定义端口转发至公网访问。<br />
							所有端口映射规则会在绑定弹性公网IP时移除，如果无绑定弹性公网IP且无添加NAT映射规则，服务器将无法访问外部网络。<br />
							<b>参考教程</b>：<br />
							NAT端口映射介绍及使用教程：暂无
						</div>
					</div>
					<div style="margin-left:2%;color: #fff;">
						<h3 style="color: #fff;margin-left:2%;margin-top: 2%;">端口映射列表</h3>
						<el-table :data="all_nat" border style="width: 100%; background-color: #171717;">
							<el-table-column prop="name" label="名称">
							</el-table-column>
							<el-table-column prop="type" label="协议">
							</el-table-column>
							<el-table-column prop="interior_port" label="内网地址">
							</el-table-column>
							<el-table-column prop="exterior_port" label="映射公网地址">
							</el-table-column>
							<el-table-column fixed="right" label="操作">
								<template slot-scope="scope">
									<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" size="small">
										删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>

		</div>

	</div>
</template>

<script scoped>
	import axios from 'axios';
	import {
		controlPower,
		deleteNat,
		getNatData,
		addNewNet
	} from '../../../api/work.js'
	export default {
		data() {
			return {
				useBackup: false,
				dialogVisible: false,
				natList: [{
					agreement: 'tcp_udp',
					tag: '远程控制@ssh',
					address: '22',
					publicIP: '154.7.177.3:46982'
				}],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				agreement: [{
						value: 'all',
						label: 'all'
					},
					{
						value: 'tcp',
						label: 'tcp'
					}, {
						value: 'udp',
						label: 'udp'
					},
				],
				all_nat: [],
				agreement_value: '',
				name_value: '',
				internal_port: ''
			}
		},
		mounted() {
			this.getAllNatData()
		},
		methods: {
			// 开关机控制
			power(e) {
				this.isClick = true
				let data = {
					encrypt_robot_id: this.$route.query.data,
					type: e,
					user_id: localStorage.getItem('userid')
				}
				// 控制开关机
				controlPower(data).then(res => {
						if (res.message === '签名验证失败') {
							this.$message.warning('请求过于频繁， 请稍后重试')
						} else {
							// 请求成功，处理返回的数据
							this.$message({
								message: res.message,
								type: 'success',
							});
						}
						this.isClick = false
					})
					.catch(error => {
						// 请求失败，处理错误信息
						this.error = error;
						this.$message.warning('出现未知错误, 请联系管理员')
					});
			},
			toHome() {
				this.$router.push('/demo/mygoods')
			},
			toPage(e) {
				var pageUrl = "/demo/" + e
				this.$router.push({
					path: pageUrl,
					query: {
						data: this.$route.query.data
					}
				})
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},

			// 删除Nat端口映射

			deleteRow(index, rows) {
				let data = {
					natAclId: this.all_nat[index].id
				}
				// 删除Nat
				deleteNat(data).then(res => {
					this.$message.success("删除成功！")
					// 调用查询
					this.getAllNatData()
				}).catch(error => {
					// 请求失败，处理错误信息
					this.error = error;
					this.$message.warning("出现未知错误, 请联系管理员")
				});

			},
			// 获取Nat端口映射数据
			getAllNatData() {
				let data = {
					encryptRobotId: localStorage.getItem("Mechine_id")
				}
				getNatData(data).then(res => {
					this.all_nat = res
				}).catch(error => {
					// 请求失败，处理错误信息
					this.error = error;
					this.$message.warning("出现未知错误, 请联系管理员")
				});
			},


			//  新增数据
			addNewNat() {
				if (this.name_value == '' || this.agreement_value == '' || this.internal_port == '') {
					this.$message.error("请填写完整数据！")
					return
				} else {
					this.dialogVisible = false
					let data = {
						natAclName: this.name_value,
						type: this.agreement_value,
						interiorPort: this.internal_port,
						encryptRobotId: localStorage.getItem("Mechine_id")
					}
					// 新增Nat数据
					addNewNet(data).then(res => {
						this.$message.success(res.message)
						this.getAllNatData()
					}).catch(error => {
						// 请求失败，处理错误信息
						this.error = error;
						this.$message.warning("出现未知错误, 请联系管理员")
					});
				}


			}
		}
	}
</script>

<style>
	a {
		text-decoration: none !important;
		color: #3EB6C2;
		border: none;
	}

	.mn_top {
		height: 60px;
		margin-top: 20px;
		background-color: #171717;
		line-height: 20px;
		border-radius: 5px;
	}

	.control {
		display: inline-block;
		cursor: pointer;

		margin: 10px 10px;
		padding: 7px 30px;

		background-color: #2f2f2f;
		border-radius: 6px;
		box-shadow: 0 0 5px #ffffff;
		color: #fff;

	}

	.scro {
		display: inline-block;
		cursor: pointer;
		font-size: 14px;
		font-weight: 700;
		padding: 8px 12px;

		color: #fff;
	}

	.mr_title {
		height: 50px;
		font-size: 16px;
		font-weight: 700;
		border: 1px solid #a3a3a3;
		padding-left: 10px;
		line-height: 50px;
	}

	.mr_msg {
		height: 50px;
		font-size: 14px;
		border: 1px solid #a3a3a3;
		padding-left: 10px;
		line-height: 50px;
	}


	.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		background-color: #171717;
		color: #fff;
	}

	.el-table__body tr.hover-row>td.el-table__cell {
		background-color: #171717;
	}

	.el-dialog__header {
		padding: 20px 20px 10px;
		background-color: #171717;
		color: #fff;
	}

	.el-dialog__body {
		padding: 30px 20px;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
		background-color: #171717;
	}

	.el-input__inner {
		background-color: #171717;
	}

	.el-dialog__footer {
		background-color: #171717;
	}

	.el-button {
		background-color: #6c6c6c;
		color: #fff;
		border: none;

	}

	.el-button:focus,
	.el-button:hover {
		background-color: #393939;
	}

	.el-select-dropdown__list {
		background-color: #171717;
		color: #fff !important;
	}

	.el-select-dropdown__item.hover,
	.el-select-dropdown__item:hover {
		background-color: #767778;
	}
</style>